<template>
    <cardComponent id="insBillAppli-contnair" v-loading="isLoading" pageTitle="账单分期撤销">
        <template slot="cardBody">
            <el-form ref="dailyFormRef" :model="dailyForm" label-width="120px" size="small">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="账户类别: ">
                            <el-input
                                disabled
                                v-model="accountType"
                                style="width: 100%; border: none"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="主卡卡号: ">
                            <el-input disabled v-model="cardInfo_3004.CARDNO" style="width: 100%;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="信用计划编号:">
                            <el-select
                                placeholder="请选择信用计划编号"
                                style="width: 100%;"
                                v-model="dailyForm.CREDNO"
                            >
                                <el-option
                                    v-for="(item, index) in CREDNOLIST"
                                    :key="index"
                                    :label="item.code + ' -- ' + item.label"
                                    :value="item.code"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item size="large" label-width="0">
                    <el-button type="primary" size="small" @click="searchData">查 询</el-button>
                </el-form-item>
            </el-form>
            <div v-if="showTrial">
                <el-divider content-position="center">已申请账单分期信息</el-divider>
                <el-table
                    :data="haveAppData"
                    border
                    stripe
                    class="heard-bg business_table"
                    style="width: 100%;"
                    size="small"
                >
                    <el-table-column prop="CREDNO" label="信用计划编号"></el-table-column>
                    <el-table-column prop="NBRMTHS" label="分期期数"></el-table-column>
                    <!-- 一次 -->
                    <el-table-column prop="AMT" label="分期金额"></el-table-column>
                    <el-table-column prop="INSTALAMT" label="每月还款额"></el-table-column>
                    <el-table-column prop="UNSTM" label="手续费"></el-table-column>
                </el-table>
                <div class="footer">
                    <el-button type="primary" size="small" @click="handleCancel">撤 销</el-button>
                </div>
            </div>
        </template>
    </cardComponent>
</template>

<script>
import { mapState } from 'vuex';
import { getAccountTypeName } from '@/utils/Common';
import cardComponent from '@/components/cardComponent/cardComponent.vue';
import { setNumber } from '@/utils/Object';
import { get_4xxx } from '@/apis/getAPIClass';

export default {
    components: {
        cardComponent,
    },
    name: 'InstallmentBillCancel',
    data() {
        return {
            accountType: '',
            dailyForm: {
                CREDNO: '',
            },
            CREDNO: '',
            haveAppData: [],
            CREDNOLIST: [], // 信用计划编号 下拉选择列表
            trailTable: [],
            isLoading: false,
            showTrial: false,
        };
    },
    async mounted() {
        // 获取信用计划编号 下拉选择列表
        this.getBaseData({ dictValue: '1082' }, 'CREDNOLIST');
        // 获取账户类型
        this.accountType = await getAccountTypeName(this.cardList_3601, this.cardInfo_3004, this);
    },
    computed: mapState({
        defaultParams: state => state.common.defaultParams, // 接口默认参数
        cardList_3601: state => state.common.cardList_3601, // 卡列表信息
        cardInfo_3004: state => state.common.cardInfo_3004,
    }),
    methods: {
        // 获取信用计划编号列表
        getBaseData(params, target) {
            this.$post.common.getBaseDataList(params).then((res) => {
                this[target] = res.data.content;
                this.dailyForm.CREDNO = (res.data.content !== null && res.data.content.length > 0) ? res.data.content[0].code : '';
            });
        },
        // 可灵活分期付款的交易明细查询
        async searchData() {
            if (this.dailyForm.CREDNO === '') {
                this.$message.warning('必须选择分期计划编号!');
                return;
            }
            const result_4052 = await this.get_4052(
                '账单分期查询',
                0,
                0,
                3,
                0,
                0,
                '156',
                this.dailyForm.CREDNO,
            );
            if (!result_4052) return false;
            const res_4052 = result_4052.body.appBody;


            this.tran4052Form = res_4052;
            if (this.CREDNOLIST) {
                for (const i in this.CREDNOLIST) {
                    if (this.CREDNOLIST[i].code === this.tran4052Form.CREDNO.toString().padStart(4, '0')) {
                        this.CREDNO = `${this.CREDNOLIST[i].label}`;
                    }
                }
            }
            if (this.tran4052Form.SMPFLAG === '1') {
                this.showTrial = true;
                this.haveAppData = [
                    {
                        CREDNO: this.CREDNO,
                        NBRMTHS: this.tran4052Form.MONTHNBR,
                        AMT: this.tran4052Form.AMT.toFixed(2),
                        INSTALAMT: this.tran4052Form.INSTALAMT.toFixed(2),
                        UNSTM: this.tran4052Form.UNSTM.toFixed(2),
                    },
                ];
            } else {
                this.showTrial = false;
                this.haveAppData = [];
                return this.$alert('错误信息：本账期尚未申请账单分期', '账单分期查询失败！', {
                    customClass: 'error', type: 'error',
                    showClose: false,
                });
            }
        },
        // 请求 4052
        async get_4052(masg, COVERTTY, PINFLAG, OPERTP, PRMCHK, CLSCHK, CURRNUM, CREDNO, NBRMTHS = '', AMT = '') {
            // 4052 配置请求头
            const appBody_4052 = {
                CARDNBR: this.cardInfo_3004.CARDNO,
                COVERTTY, // 汇率种类
                PINFLAG,
                OPERTP, // 操作类型 0－申请 1－撤销 2—查询 3—上期账单信息查询 4-预申请
                PRMCHK,
                CLSCHK,
                CURRNUM,
                CREDNO,
                NBRMTHS, // 分期期数
                AMT: setNumber(AMT, 12), // 分期金额
            };

            const result_4052 = await get_4xxx('4052', masg, appBody_4052, this, false);
            if (!result_4052) return false;
            return result_4052;
        },
        // 撤销
        async handleCancel() {
            // 再次确定是否撤销
            const confirmResult = await this.$confirm(
                '此操作将进行账单分期撤销, 是否继续?',
                '账单分期撤销提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    customClass: 'warning', type: 'warning',
                    showClose: false,
                },
            ).catch(err => err);
            if (confirmResult !== 'confirm') return this.$message.info('已取消账单分期撤销');
            this.isLoading = true;
            const result_4052 = await this.get_4052(
                '账单分期撤销',
                0,
                0,
                1,
                0,
                0,
                '156',
                this.dailyForm.CREDNO,
                this.tran4052Form.MONTHNBR,
                this.tran4052Form.AMT,
            );
            if (!result_4052) return false;
            // 配置成功之后展示的数据
            this.$message.success('撤销成功！');
            this.searchData();
        },
    },
};
</script>

<style  scoped lang="scss">
#insBillAppli-contnair .el-form-item {
    text-align: center;
}
.footer {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 18px;
}
</style>
